<!DOCTYPE html>
<html lang="en"  xmlns:th="https://www.thymeleaf.org"        xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <div th:replace="common/common::html" ></div>
    <meta charset="UTF-8">
    <title th:text="#{main.title}"></title>
    <script th:inline="javascript">
        $(function () {
           $("#user-info-btn-id").click(function (event) {
               event.stopPropagation();
           $("#user-info-ul-id").removeClass("user-drop-down-hide");
           });
           //app隐藏用户信息
            $("#app").click(function () {
                $("#user-info-ul-id").addClass("user-drop-down-hide");
            });
            $("#system-menu-ul-id > li").click(function () {
                $("#system-menu-ul-id >li").removeClass("active");
                $(this).addClass("active");
                $("#server-menu-nav-id >ul").removeClass("in active");
                var  tabId=$(this).attr("tablid");
                $("#"+tabId).addClass("in active");
            });

            //第一个系统菜单点击动作
            $("#system-menu-ul-id > li:first >a").click();
            //增加展开事件
            $("#server-menu-nav-id > ul > li").click(function () {
                var openFlag = $(this).attr("openFlag");
                var i = $(this).find(".open-icon");
                var ul=$(this).find(".server-menu-2");
                i.removeClass("fa-folder-open-o fa-folder");
                if (openFlag === 'true'){
                    $(this).attr("openFlag","false");
                    i.addClass('fa fa-folder');
                    ul.css("display","none");
                }else{
                    $(this).attr("openFlag","true");
                    i.addClass('fa fa-folder-open-o');
                    ul.css("display","");
                }

            });
            //修改密码表单初始化
            $("#modify-password-dialog-form").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#modify-password-dialog-id").dialog('close')
                    if(data.success) {
                        $("#modify-password-dialog-id").dialog('close')
                        $("#modify-password-dialog-form").resetForm();
                    }else {
                        $("#modp-old-password-id").addClass("ui-state-error");
                        $("#modp-old-password-id").focus();
                    }
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });
            //修改密码对话框
            $("#modify-password-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{main.user.modify.password.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var flag = $("#modify-password-dialog-form input.form-control").verification();
                            if(!flag){
                                return;
                            }
                            var newPasswd = $("#modp-new-password-id").val();
                            var confrimPasswd=$("#modp-confirm-password-id").val();
                            if(newPasswd !== confrimPasswd){
                                $("#modp-new-password-id").addClass("ui-state-error");
                                $("#modp-new-password-id").focus();
                                return;
                            }
                            // message("修改密码")
                            $("#modify-password-dialog-form").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            //修改密码按钮
            $("#modify-password-btn-id").click(function () {
                $("#modify-password-dialog-id").dialog('open');
            });

        });//ready
    </script>

</head>
    <style>
      .main-head{
          flex-basis:60px;
          display: flex;
          flex-direction: row;
          align-items: center;
      }
      .system-menu{
          flex-basis:80px;
          /*background-color: #A7F43D;*/
      }
      .server-menu-2{
          padding-left: 10px;
      }
      .server-menu-1.fade.in{
          display: unset !important;
      }
      .server-menu-1.fade{
          display: none !important;
      }
      .server-menu-1>li>.btn,
      .server-menu-2>li>.btn{
          text-align: start !important;

      }

      .head-img{
          flex-grow: 1;
      }
        .main-middle{
            flex-grow: 1;
           display: flex;
            flex-direction: row;
        }
        .server-menu{
            flex-basis: 150px ;
            /*background-color: #a6e1ec;*/
        }
        .middle-contents{
            flex-grow: 1;
        }
        .user-info-nav{
            position: absolute;
            top: 29px;
            right: 50px;
            width: 150px;
        }
        .user-drop-down{
      background-color: #ffffff;
      border: 1px solid #999999;
            padding: 5px 10px;
        }
        .user-drop-down-hide{
            display: none;
        }
    </style>

<body>
<nav class="user-info-nav">
<!--    <a th:href="@{/logout}" th:text="#{main.logout}"></a>-->
    <a  id="user-info-btn-id"      class="btn">
            <i class="glyphicon glyphicon-user"></i>
        <span sec:authentication="principal.niceName"></span>
    </a>

    <ul id="user-info-ul-id"   class="user-drop-down nav navbar-btn user-drop-down-hide">
           <li>
              <a class="btn"> <i class="glyphicon  glyphicon-pencil"></i>
                  <span th:text="#{main.user.modify.info}"></span></a>
           </li>
        <li>
            <a class="btn" id="modify-password-btn-id"> <i class="glyphicon  glyphicon-cog"></i>
                <span th:text="#{main.user.modify.password}"></span></a>
        </li>
        <li>
            <a class="btn" th:href="@{/logout}"> <i class="glyphicon  glyphicon-record"></i>
                <span th:text="#{main.logout}"></span></a>
        </li>
    </ul>
</nav>
<div id="app">
    <header class="main-head">
        <div class="head-img">
            <img th:src="@{/assets/images/logo_zh.png}" th:if="${session.language} eq 'zh'">
            <img th:src="@{/assets/images/logo_en.png}" th:if="${session.language} eq 'en'">
        </div>

    </header>
    <nav class="system-menu">
        <ul  id="system-menu-ul-id"   class="nav nav-tabs" >
            <li th:each="item:${session.menuList}" th:tablId="${'tab-'+item.menuId}">
                <a class="btn">
                    <i th:class="${item.menuIcon}"></i>
                    <span th:text="${item.menuName}"></span>
                </a>


            </li>
        </ul>

    </nav>
   <section class="main-middle">
       <nav  id="server-menu-nav-id"  class="server-menu">
     <ul class="server-menu-1 nav navbar-btn tab-pane fade" th:each="item:${session.menuList}" th:id="${'tab-'+item.menuId}">
         <li th:each="item1:${item.children}">
             <a class="btn"  openFlag="true">
                 <i th:class="${'open-icon ' + item1.menuIcon}"></i>
                 <span th:text="${item1.menuName}"></span>
             </a>
            <ul class="server-menu-2 nav navbar-btn">
                <li th:each="item2:${item1.children}">
                    <a class="btn" target="main-iframe" th:href="${item2.menuUrl}">
                        <i th:class="${item2.menuIcon}"></i>
                        <span th:text="${item2.menuName}"></span>
                    </a>
                </li>
            </ul>
         </li>
     </ul>
       </nav>
       <article class="middle-contents">
           <iframe name="main-iframe" width="100%" height="100%" style="border: none" th:src="@{/homePage}"></iframe>
       </article>


   </section>

</div>
<!--<p th:text="#{main.submit}"> 登录成功</p>-->
<!--<a th:href="@{/logout}" th:text="#{main.logout}">注销</a>-->
<div id="modify-password-dialog-id" style="display: none">
    <form id="modify-password-dialog-form" th:action="@{/user/modifyPassword}" method="post">
        <div class="form-group">
            <span th:text="#{main.modp.old.password}"></span>
            <input  id="modp-old-password-id"  class="form-control" type="password" name="oldPassword" pattern="^.{1,8}$" th:title="#{main.password.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{main.modp.new.password}"></span>

            <input class="form-control" type="password" name="newPassword" id="modp-new-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{main.modp.confirm.password}"></span>
            <input class="form-control" type="password"  id="modp-confirm-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
        </div>
    </form>

</div>

</body>
</html>